<script src="./config/index.js"></script>
<template>
  <div id="content">
    <!--外层容器-->
    <el-container id="container">
      <!--顶栏容器-->
      <el-container id="header-container" style="height: 10%">
        <el-header style="height: 100%;width: 100%">
          <Header></Header>
        </el-header>
      </el-container>
      <!--中间容器-->
      <el-container id="center-container" style="height: 85%">
        <!--侧边栏容器-->
        <el-aside style="width: 25vh">
          <Aside></Aside>
        </el-aside>
        <!--主要区域容器-->
        <el-main style="width: 75vh">
          <Bus v-on:mainChang="mainChang"></Bus>
          <!--<Ele></Ele>-->
          <router-view></router-view>
        </el-main>
      </el-container>
      <!--底栏容器-->
      <el-footer id="footer-container" style="height: 5%">
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import Footer from "./components/Footer";
  import Aside from "./components/Aside";
  import Header from "./components/Header";
  import Hello from "./Hello";
  import Bus from "./Bus";
  import Ele from "./components/Ele";

  export default {
    name: "Content",
    components: {
      Hello,
      Header,
      Aside,
      Footer,
      Ele,
      Bus
    },
    mounted: function () {
      // 用$on事件来接收参数
      Bus.$on('mainChang', (data) => {
        console.log(data)
        this.$router.push(data);
      })
    },
    methods: {
      mainChang: function (componentName) {
        console.log('data:' + componentName)
      }
    }
  }
</script>

<style scoped>
  #container {
    height: 100vh;
    width: 100%;
  }

  #content {
    height: 100%;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  #header-container {
    background-color: #B3C0D1;
  }

  #center-container {
  }

  #footer-container {
    background: cyan;
  }
</style>
